<template>
  <!-- 左侧功能页 -->
  <div class="compileForm">
    <div class="selectComponent">
      <div class="title-part">
        <div class="text">基础组件</div>
      </div>
      <div class="operation-box">
        <el-button @click="addDescribe">文本描述</el-button>
        <el-button @click="addNavImg">图 片</el-button>
      </div>
      <div class="title-part">
        <div class="text">联系人组件</div>
      </div>
      <div class="operation-box">
        <el-button @click="addBirthday">学员生日</el-button>
        <el-button @click="addStudentSex">学员性别</el-button>
        <el-button @click="addWechat">微信号</el-button>
        <el-button @click="addAddress">联系地址</el-button>
      </div>
    </div>
    <div class="phonePreview">
      <div class="sortableList">
        <vuedraggable class="wrapper" v-model="formList" animation="300" @end="endMove">
          <transition-group>
            <div
              v-for="(item, index) in formList"
              :key="index"
              class="sortableItem"
              @click.stop="leftClick(index)"
            >
              <div :class="leftIndex == index ? 'active' : ''" class="item-preview">
                <div class="headerPreview">
                  <!--删除按钮-->
                  <div
                    v-if="leftIndex == index&&item.type!=='head'&&item.type!=='studentName'&&item.type!=='contact'"
                    class="close"
                    @click.stop
                    @click="close(index)"
                  >
                    <img src="/src/assets/settinyschool/delete.png" alt />
                  </div>
                  <!--图片广告左侧预览组件-->
                  <headForm
                    v-if="item.type == 'head'"
                    :list="formList"
                    :left-index="index"
                    class="headForm"
                  />
                  <studentName
                    v-if="item.type == 'studentName'"
                    :list="formList"
                    :left-index="index"
                    class="studentName"
                  />
                  <contact v-if="item.type == 'contact'" :list="formList" :left-index="index" />
                  <birthday v-if="item.type == 'birthday'" :list="formList" :left-index="index" />
                  <studentSex v-if="item.type == 'sex'" :list="formList" :left-index="index" />
                  <wechat v-if="item.type == 'wechat'" :list="formList" :left-index="index" />
                  <contactAddress
                    v-if="item.type == 'address'"
                    :list="formList"
                    :left-index="index"
                  />
                  <describe v-if="item.type == 'describe'" :list="formList" :left-index="index" />
                  <nvaImg v-if="item.type == 'nvaImg'" :list="formList" :left-index="index" />
                </div>
              </div>
            </div>
          </transition-group>
        </vuedraggable>

        <div class="bottom-apply">
          <el-button type="primary">立即报名</el-button>
        </div>
      </div>
    </div>
    <div class="foot-btn">
      <el-button @click="cancelForm">取消</el-button>
      <el-button type="primary" @click="saveForm">保存</el-button>
    </div>
  </div>
</template>

<script>
// 拖拽组件
import vuedraggable from 'vuedraggable'
import headForm from './compileform/headform'
import studentName from './compileform/studentname'
import contact from './compileform/contact'
import birthday from './compileform/birthday'
import studentSex from './compileform/studentsex'
import wechat from './compileform/wechat'
import contactAddress from './compileform/address'
import describe from './compileform/describe'
import nvaImg from './compileform/nvaimg'
export default {
  components: {
    vuedraggable,
    headForm,
    studentName,
    contact,
    birthday,
    studentSex,
    wechat,
    contactAddress,
    describe,
    nvaImg
  },
  data() {
    return {
      leftIndex: 0,
      formList: [
        {
          type: 'head',
          showRight: false,
          formName: '招生表单',
          formContent: '建议在此输入机构的介绍内容或表单的填写引导',
          imageUrl: '/src/assets/analyze_data/header_bg_2.png'
        },
        {
          type: 'studentName',
          showRight: false,
          title: '学员姓名',
          titleDescribe: '',
          placeholder: '请输入名字'
        },
        {
          type: 'contact',
          showRight: false,
          title: '联系人手机',
          titleDescribe: '',
          placeholder: '请输入手机号码',
          noteVerify: true
        }
      ]
    }
  },
  methods: {
    endMove(evt) {
      this.leftIndex = evt.newIndex
    },
    leftClick(index) {
      console.log(index)
      this.leftIndex = index
      for (let i = 0; i < this.formList.length; i++) {
        this.formList[i].showRight = false
        this.$set(this.formList, i, this.formList[i])
      }
      // this.$set(that.list,that.list)
      this.formList[this.leftIndex].showRight = true
      console.log(this.formList)
    },
    // 删除列表
    close() {
      this.formList.splice(this.leftIndex, 1)
    },
    // 添加文字描述
    addDescribe() {
      this.formList.push({
        type: 'describe',
        showRight: false,
        content: '文本描述'
      })
    },
    // 添加图片
    addNavImg() {
      this.formList.push({
        type: 'nvaImg',
        showRight: false,
        imageUrl: '',
        link: '',
        showLink: false
      })
    },
    // 添加学员生日
    addBirthday() {
      this.formList.push({
        type: 'birthday',
        showRight: false,
        title: '学员生日',
        titleDescribe: '',
        dateFormat: 'YTD'
      })
    },
    // 添加学员性别
    addStudentSex() {
      this.formList.push({
        type: 'sex',
        showRight: false,
        title: '性别',
        titleDescribe: '',
        sex: ''
      })
    },
    // 添加学员微信
    addWechat() {
      this.formList.push({
        type: 'wechat',
        showRight: false,
        title: '微信号',
        titleDescribe: '',
        placeholder: '请输入微信号'
      })
    },
    // 添加学员地址
    addAddress() {
      this.formList.push({
        type: 'address',
        showRight: false,
        title: '地址',
        titleDescribe: '',
        format: 'province'
      })
    },

    cancelForm() {
      this.$router.go(-1)
    },
    saveForm() {
      if (!this.formList[0].formName || !this.formList[0].formContent) {
        this.$message({
          type: 'warning',
          message: '请完善表单名称和内容'
        })
        return
      } else if (!this.formList[1].title) {
        this.$message({
          type: 'warning',
          message: '请完善学员姓名内容'
        })
        return
      } else if (!this.formList[2].title) {
        this.$message({
          type: 'warning',
          message: '请完善联系人手机内容'
        })
        return
      } else {
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.compileForm {
  padding: 20px;
  position: relative;
  .selectComponent {
    position: relative;
    float: left;
    width: 270px;
    height: 667px;
    margin-right: 20px;
    padding: 10px 0 0;
    color: #353535;
    font-size: 14px;
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    .title-part {
      height: 30px;
      margin: 10px 0 20px;
      padding: 0 20px;
      .text {
        height: 30px;
        line-height: 20px;
        border-bottom: 1px solid #eee;
      }
    }
    .operation-box {
      text-align: center;
      /deep/.el-button--medium {
        width: 100px;
        margin: 5px;
      }
    }
  }
  .phonePreview {
    position: relative;
    float: left;
    width: 812px;
    height: 667px;
    padding: 0 400px 300px 0;
    overflow-x: hidden;
    overflow-y: scroll;
    .sortableList {
      margin: 0;
      padding: 10px;
      border: 1px solid #eee;

      .sortableItem {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
        .item-preview {
          position: relative;
          width: 100%;
          border: 1px dashed transparent;
          .headerPreview {
            width: 375px;
            .close {
              z-index: 5;
              position: absolute;
              top: -10px;
              right: -10px;
              width: 20px;
              img {
                width: 100%;
              }
            }
          }
        }
        .item-preview.active {
          border: 1px dashed #2a75ed;
        }
      }
      .sortableItem::after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        content: '';
      }
    }
  }
  .bottom-apply {
    padding: 20px;
    /deep/.el-button {
      width: 100%;
    }
  }
  .foot-btn {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: calc(100vw - 180px);
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #eee;
    text-align: center;
    background-color: #fff;
    z-index: 9;
  }
}
</style>
